<template>
	<div class="AddDialog">
		<el-dialog
			:close-on-click-modal="closeOnClickModal"
			:destroy-on-close="true"
			:title="title"
			v-model="visible"
			width="60%"
			@open="open"
			@closed="dialogClosed"
		>
			<div class="form_wrap">
				<el-form-item prop="positionId" label="广告位置" v-if="isAdd">
					<PositionSelector v-model="positionId" :dotDisable="true" @select="getPositionData" />
					<el-button style="margin-left: 10px" type="primary" @click="onAddNewAd">新增广告位</el-button>
				</el-form-item>
				<el-form ref="formRef" :model="ruleForm" label-width="140px" :rules="rules">
					<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
						<el-tab-pane v-for="(item, index) in ruleForm.list" :key="item.id" :label="'位置-' + (index + 1)" :name="item.id">
							<el-form-item :prop="`list.${index}.positionId`" :rules="rules.positionId" label="广告位置">
								<PositionSelector v-model="item.positionId" :dotDisable="true" @select="selectPositionId" />
							</el-form-item>
							<el-form-item :prop="`list.${index}.type`" :rules="rules.type" label="广告主体类型">
								<el-radio-group v-model="item.type" @change="changeType(index)">
									<template v-for="(item1, index1) in adMainTypeOptions">
										<el-radio :key="index1" :label="item1.value" v-if="index1 !== 0 && index1 !== 5">{{ item1.label }}</el-radio>
									</template>
								</el-radio-group>
							</el-form-item>
							<el-form-item :prop="`list.${index}.specificContentNum`" :rules="rules.specificContentNum" v-if="item.type === 1" label="商品">
								<ProdSelect v-model="item.specificContentNum" />
							</el-form-item>
							<el-form-item :prop="`list.${index}.specificContentNum`" :rules="rules.specificContentNum" v-else-if="item.type === 2" label="分类">
								<CateSelector v-model="item.specificContentNum" :firstLevelDisabled="true" />
							</el-form-item>
							<el-form-item :prop="`list.${index}.specificContentNum`" :rules="rules.specificContentNum" v-else-if="item.type === 3" label="优惠券">
								<CouponSelector v-model="item.specificContentNum" />
							</el-form-item>
							<el-form-item :prop="`list.${index}.specificContent`" :rules="rules.specificContent" v-else-if="item.type === 4" label="活动链接">
								<el-input show-word-limit maxlength="200" v-model="item.specificContent"></el-input>
							</el-form-item>
							<el-form-item label="最佳效果图片尺寸">
								<span>宽 * 高 ： </span>
								<span style="color: red">{{ limitSizeText }}</span>
							</el-form-item>
							<el-form-item :prop="`list.${index}.pcPic`" :rules="rules.pcPic" label="图片-PC端">
								<SingleImg v-model="item.pcPic" @change="changePcPic" />
							</el-form-item>
							<el-form-item :prop="`list.${index}.mobilePic`" :rules="rules.mobilePic" label="图片-移动端">
								<SingleImg v-model="item.mobilePic" @change="changeMobliePic" />
							</el-form-item>
							<el-form-item label="倒计时显示">
								<DatePicker
									v-model:start="item.countdownStartTime"
									v-model:end="item.countdownEndTime"
									type="datetimerange"
									start-placeholder="开始时间"
									end-placeholder="结束时间"
								/>
							</el-form-item>
							<el-form-item label="文字主标题">
								<el-input show-word-limit maxlength="200" v-model="item.title" style="height: 35px"></el-input>
								<el-radio-group v-model="item.titleStatus">
									<el-radio :label="1">显示</el-radio>
									<el-radio :label="0">隐藏</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="文字副标题">
								<el-input show-word-limit maxlength="200" v-model="item.titleTwo" style="height: 35px"></el-input>
								<el-radio-group v-model="item.titleTwoStatus">
									<el-radio :label="1">显示</el-radio>
									<el-radio :label="0">隐藏</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="宣传内容">
								<el-input :rows="1" show-word-limit maxlength="9999" v-model="item.content" type="textarea"></el-input>
								<el-radio-group v-model="item.contentStatus">
									<el-radio :label="1">显示</el-radio>
									<el-radio :label="0">隐藏</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="排序">
								<Num v-model="item.sort" :isDisabled="item.positionId == 27"></Num>
							</el-form-item>
							<el-form-item label="有效时间">
								<DatePicker
									v-model:start="item.startTime"
									v-model:end="item.endTime"
									type="datetimerange"
									start-placeholder="开始时间"
									end-placeholder="结束时间"
								/>
							</el-form-item>
							<el-form-item label="状态">
								<MySwitch v-model="item.status"> </MySwitch>
							</el-form-item>
						</el-tab-pane>
					</el-tabs>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="visible = false">取 消</el-button>
					<el-button type="primary" :loading="loading" @click="toSave">保 存</el-button>
				</span>
			</template>
		</el-dialog>
		<PictureSelectorDialog v-model="isShowPicSelector" :maxLength="1" @submit="getPic" />
	</div>
</template>

<script>
export default {
	name: 'AddDialog',
	mixins: [dialog],
};
</script>

<script setup>
import { ElMessage } from 'element-plus';
import dialog from '/@/mixins/dialog';
import PictureSelectorDialog from '/@/components/pictureSelector/PictureSelectorDialog.vue';
import { rules, adMainTypeOptions, getAllPosition } from './hook';
import { useSinglePic } from '/@/hooks';
import ProdSelect from '/@/components/common/prodSelect/ProdSelect.vue';
import CateSelector from '/@/components/common/CateSelector.vue';
import SingleImg from '/@/components/common/imgList/SingleImg.vue';
import DatePicker from '/@/components/common/datePicker/DatePicker.vue';
import MySwitch from '/@/components/base/MySwitch.vue';
import PositionSelector from '/@/components/common/positionSelector/PositionSelector.vue';
import CouponSelector from '/@/components/common/couponSelector/CouponSelector.vue';
import { useMarketingApi } from '/@/api/marketing';
import positionSizeList from './positionSizeList';

const props = defineProps({
	isAdd: {
		type: Boolean,
		default: false,
	},
	editItem: {
		type: Object,
		default: () => {
			return {};
		},
	},
	positionList: {
		type: Array,
		default: () => {
			return [];
		},
	},
});
const emit = defineEmits(['update:modelValue', 'refresh']);

const { editAdPosition } = useMarketingApi();
const ruleForm = reactive({});
const formRef = ref();
const editFormItem = ref();
const loading = ref(false);
const limitSizeText = ref('');
const activeName = ref(0);
const activeIndex = ref(-1);
const positionId = ref(null);
const open = () => {
	if (formRef.value) formRef.value.clearValidate();
	if (props.isAdd) return;
	ruleForm.list = props.positionList;
	activeName.value = props.editItem.id;
	ruleForm.list.map((item) => {
		item.specificContentNum = item.specificContent ? Number(item.specificContent) : item.specificContentNum;
	});
};

const title = computed(() => (props.isAdd ? '新增' : '修改') + '广告位');

const dialogClosed = () => {
	ruleForm.list = [];
	positionId.value = '';
};
const onAddNewAd = () => {
	if (ruleForm.list.length == 0) {
		activeIndex.value = 0;
	}
	if (!positionId.value) return ElMessage.error('请先选择广告位置');
	ruleForm.list.push({
		positionId: undefined,
		type: 0,
		specificContent: '',
		specificContentNum: 0,
		pcPic: '',
		mobilePic: '',
		countdownStartTime: '',
		countdownEndTime: '',
		startTime: '',
		endTime: '',
		title: '',
		titleTwo: '',
		titleStatus: 0,
		titleTwoStatus: 0,
		content: '',
		contentStatus: 0,
		sort: 0,
		note: '',
		position: '',
		status: 0,
	});
};
const handleTabClick = (tab) => {
	// console.log(tab.index);
	activeIndex.value = Number(tab.index);
};
const toSave = () => {
	formRef.value.validate(async (valid) => {
		if (!valid) return ElMessage.warning('请填写所有必填项！');
		ruleForm.list.map((item) => {
			item.specificContent = item.specificContentNum ? String(item.specificContentNum) : item.specificContent;
		});
		if (activeIndex.value == -1) {
			editFormItem.value = ruleForm.list.find((item) => {
				return item.id == activeName.value;
			});
		} else {
			editFormItem.value = ruleForm.list[activeIndex.value];
		}
		console.log('9----', editFormItem.value);
		const api = editAdPosition;
		let res = await api(editFormItem.value);
		if (res.code !== 200) return;
		emit('update:modelValue', false);
		editFormItem.value = -1;
		ElMessage.success('保存成功！');
		ruleForm.list = [];
		emit('refresh');
	});
};
const { isShowPicSelector, getPic } = useSinglePic(ruleForm);

const changeType = (index) => {
	if (ruleForm.list) {
		ruleForm.list[index].specificContent = undefined;
		ruleForm.list[index].specificContentNum = undefined;
	}
};

const changePcPic = (img) => {
	console.log(img);
};
const getPositionData = async (id) => {
	const res = await getAllPosition(id);
	ruleForm.list = res.data;
	if (res.data.length) {
		activeName.value = res.data[0].id;
	}
};

const changeMobliePic = () => {};

const selectPositionId = (id) => {
	positionSizeList.some((item) => {
		if (item.id === id) {
			if (!item.limitSizeText) item.limitSizeText = '';
			limitSizeText.value = item.limitSizeText || '';
			return true;
		}
	});
};
</script>

<style lang="scss" scoped>
.AddDialog {
	:deep(.el-dialog) {
		.el-dialog__body {
			max-height: 60vh;
			overflow-y: scroll;
		}
	}
}
</style>
